<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html style='height:100%;'>
<head>
<base href="<%=basePath%>">

<title>装修方案新增</title>
<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/common.css">
<link href="js/select2/select2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css"
	href="static/p_house/house_index.css" />
<link rel="stylesheet" type="text/css"
	href="js/webuploader-0.1.5/webuploader.css" />

<script src="js/jquery-1.11.1.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript"
	src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="js/webuploader-0.1.5/webuploader.js"></script>
<script type="text/javascript" src="js/sharefunction.js"></script>
<script src="js/select2/select2.min.js"></script>
<script type="text/javascript" src="js/form.js"></script>
<!-- 图片放大 -->
<script src="js/postbird-img-glass/postbird-img-glass.js"></script>
<style>
.webuploader-container {
	position: relative;
	top: 5px;
}
</style>
<body >
<!-- 装修方案 -->
<div>
	<!-- 表单开始 -->
	<form id="decorateSchemeForm" action="customer/dm/addDecorateScheme"
		method="post">
		<input type="hidden" id="decorateScheme_articleId" />
		<div class="panel panel-default">
			<div class="panel-body">
				<table cellpadding="10" cellspacing="5" class="mytable">
					<tr>
						<td width="90"><span class="style_btn">申报时间</span></td>
						<td><input  name="declareTime" id="declareTime"
							readonly="readonly" class="Wdate" onclick="WdatePicker()">
						</td>
					</tr>
					<tr>
						<td width="90"><span class="style_btn">施工方案</span></td>
						<td><input name="schemeName" /><div id='filePicker_schemeName' style="display: none;margin-left:10px">上传</div></td>
					</tr>
					<!-- 施工方案附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_schemeName'></div> <!-- 上传按钮 -->
						</td>
					</tr>
					<tr>
						<td><span class="style_btn">施工图纸</span></td>
						<td><input name="schemeImg"  /><div id='filePicker_schemeImg' style="display: none;margin-left:10px">上传</div></td>
					</tr>
					<!-- 施工图纸附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_schemeImg'></div> <!-- 上传按钮 -->
						</td>
					</tr>
					<tr>
						<td><span class="style_btn">材料清单</span></td>
						<td><input name="materials"  /><div id='filePicker_materials' style="display: none;margin-left:10px;">上传</div></td>
					</tr>
					<!-- 材料清单附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_materials'></div> <!-- 上传按钮 -->
						</td>
					</tr>

					<tr>
						<td><span class="style_btn">工期安排</span></td>
						<td><input   name="staDuration" id="sdate"
							readonly="readonly" class="Wdate"
							onclick="WdatePicker({maxDate:'#F{$dp.$D(\'edate\')}'})">
							&nbsp;至&nbsp; <input readonly="readonly"  
							name="endDuration" id="edate" class="Wdate"
							onclick="WdatePicker({minDate:'#F{$dp.$D(\'sdate\')}'})"></td>
					</tr>
					<tr>
						<td><span class="style_btn">安全承诺</span></td>
						<td><input name="promise"   /><div id='filePicker_promise' style="display: none;margin-left:10px;">上传</div></td>
					</tr>
					<!-- 安全承诺附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_promise'></div> <!-- 上传按钮 -->
						</td>
					</tr>

					<tr style="border-bottom:1px solid gray">
						<td><span class="style_btn">专项申请</span></td>
						<td></td>
					</tr>
					<tr>
						<td width="90" align="center">消防</td>
						<td><input name="declareFirecontrol"   /><div id='filePicker_declareFirecontrol' style="display: none;margin-left:10px;">上传</div></td>
					</tr>
					<!-- 安全承诺附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_declareFirecontrol'></div> <!-- 上传按钮 -->
						</td>
					</tr>

					<tr>
						<td align="center">电力</td>
						<td><input name="declareElectricity" /><div id='filePicker_declareElectricity' style="display: none;margin-left:10px;">上传</div></td>
					</tr>
					<!-- 安全承诺附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_declareElectricity'></div> <!-- 上传按钮 -->
						</td>
					</tr>

					<tr>
						<td align="center">燃气</td>
						<td><input name="declareFuelgas"   /><div id='filePicker_declareFuelgas' style="display: none;margin-left:10px;">上传</div></td>
					</tr>
					<!-- 安全承诺附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_declareFuelgas'></div> <!-- 上传按钮 -->
						</td>
					</tr>

					<tr>
						<td align="center">其他</td>
						<td><input name="declareOther"   /><div id='filePicker_declareOther' style="display: none;margin-left:10px;">上传</div></td>
					</tr>
					<!-- 安全承诺附件 -->
					<tr>
						<td></td>
						<td>
							<!-- 缩略图容器 -->
							<div id='list_declareOther'></div> <!-- 上传按钮 -->
						</td>
					</tr>

				</table>
			</div>
			<!-- 专项申报 -->
			<!-- 修改时添加变更说明 -->
		<div style="margin:10px;display:none;" id="ds_div" >
			变更说明<textarea rows="3" name="remark" id="dsRemark" style="width:70%"></textarea><span style="color:red;">*</span>
		</div>
		</div>

		<div id="dSchemeBtn"
			style="width:100%;text-align:center; padding-top:20px">
			<br /> <br />
		</div>
		<input hidden="hidden" value="${id }" id="entityId_dSchemeId"
			name="dSchemeId">
	</form>
	<!-- 表单结束 -->
</div>

<!-- 模版按钮 -->
<div style="display: none;">
	<!-- <button class="btn btn-danger radius" id="dSchemeEdit"
		onclick="editForm(this);" type="button">启用编辑</button> -->
	<button class="btn btn-danger radius" id="dSchemetijiao"
		onclick="submitForm(this);" type="button">提交</button>
	<button class="btn btn-danger radius" style="margin-left: 10px;"
		id="dSchemesave" onclick="submitForm(this);" type="button">保存</button>
	<a class="btn btn-default radius" style="margin-left: 10px;"
		id="dSchemeReset" onclick="resetForms('decorateSchemeForm')">重置</a>
</div>
<!-- 装修方案JS 所有需要引入的文件都在主页面引入-->
<script type="text/javascript">

	var opt = 0; //标识是新增还是修改 0:保存,1：提交  2:修改
	var schemeFileList = new Array(); //附件id列表
	$(function() {
		if(schemeFlag=='2'){//编辑
			$("#ds_div").show();
		}
		
		//初始化图片
		initSchemeFile();
		//初始化表单提交功能
		mySubmit("decorateSchemeForm", initDSchemeData, dSchemeDataSuccess);
		//初始化各个上传插件
		//参数说明：上传按钮id、缩略图容器id、物件id、存放上传文件信息隐藏域id、成功回调、失败回调
		initWebUpload("filePicker_schemeName", "list_schemeName", "施工方案", "decorateScheme_articleId", decorationManageUpSccess);
		initWebUpload("filePicker_schemeImg", "list_schemeImg", "施工图纸", "decorateScheme_articleId",  decorationManageUpSccess);
		initWebUpload("filePicker_materials", "list_materials", "材料清单", "decorateScheme_articleId", decorationManageUpSccess);
		initWebUpload("filePicker_promise", "list_promise", "安全承诺", "decorateScheme_articleId",  decorationManageUpSccess);
		initWebUpload("filePicker_declareFirecontrol", "list_declareFirecontrol", "消防申请", "decorateScheme_articleId",  decorationManageUpSccess);
		initWebUpload("filePicker_declareElectricity", "list_declareElectricity", "电力申请", "decorateScheme_articleId", decorationManageUpSccess);
		initWebUpload("filePicker_declareFuelgas", "list_declareFuelgas", "燃气申请", "decorateScheme_articleId",  decorationManageUpSccess);
		initWebUpload("filePicker_declareOther", "list_declareOther", "其它申请", "decorateScheme_articleId", decorationManageUpSccess);
		//当刚开始这个div没有被展示 display=none时 这个div的宽高会为0，导致不能点击，所以要手动设置高度
			$("div[id^=filePicker] div").css({"width":"60px","height":"30px"});
		//初始化表单数据，如果该页面为修时会将opt修改为1
		initDSchemeForm();
	});
	
	function decorationManageUpSccess(file,data){
		successImg(file.id);
		
	}
	//缩略图上传成功回调
	function successImg(id){
		PostbirdImgGlass.init({
			domSelector : "#"+id+" img",
			animation : true,
			myDocument : window.parent.parent.parent
		});
	}
	function initSchemeFile(){
		var dSchemeId = $("#decorateSchemeForm").find("input[name='dSchemeId']").val();
		//展示图片数据
		getFileList(dSchemeId, "施工方案", "#list_schemeName", setSchemeRFL, imgPlus);
		getFileList(dSchemeId, "施工图纸", "#list_schemeImg", setSchemeRFL, imgPlus);
		getFileList(dSchemeId, "材料清单", "#list_materials", setSchemeRFL, imgPlus);
		getFileList(dSchemeId, "安全承诺", "#list_promise", setSchemeRFL, imgPlus);
		getFileList(dSchemeId, "消防申请", "#list_declareFirecontrol", setSchemeRFL, imgPlus);
		getFileList(dSchemeId, "电力申请", "#list_declareElectricity", setSchemeRFL, imgPlus);
		getFileList(dSchemeId, "燃气申请", "#list_declareFuelgas", setSchemeRFL, imgPlus);
		getFileList(dSchemeId, "其它申请", "#list_declareOther", setSchemeRFL, imgPlus);
	}
	
	//初始化装修方案表单展示
	var schemeFlag = '${schemeFlag}';//查看、编辑状态
	function initDSchemeForm() {
		var dSchemeId = $("#decorateSchemeForm").find("input[name='dSchemeId']").val();
		if (dSchemeId == "") {
			//重置表单
			$("#decorateSchemeForm")[0].reset();
			//增加保存提交按钮
			$("#dSchemeBtn").prepend($("#dSchemeReset"));
			$("#dSchemeBtn").prepend($("#dSchemesave"));
			$("#dSchemeBtn").prepend($("#dSchemetijiao"));
			$("#decorateSchemeForm div[id^='filePicker']").css({"display":"inline-block","vertical-align":"bottom"});
		} else {
			$.getJSON("customer/dm/getDecorateSchemeById", {
				id : dSchemeId
			}, function(data, status) {
				var v = data;
				//等于null代表是保存或提交状态
				if (v == null) {
					//增加保存提交按钮
					$("#dSchemeBtn").prepend($("#dSchemeReset"));
					$("#dSchemeBtn").prepend($("#dSchemesave"));
					$("#dSchemeBtn").prepend($("#dSchemetijiao"));
					$("#decorateSchemeForm div[id^='filePicker']").css({"display":"inline-block","vertical-align":"bottom"});
					return false;
				}else{
				//更改操作字段为修改状态
				opt = 2;
				

				//展示表单数据
				$("input[name='schemeName']").val(v.schemeName);
				$("input[name='schemeImg']").val(v.schemeImg);
				$("input[name='materials']").val(v.materials);
				$("input[name='staDuration']").val(new Date(v.staDuration).format("yyyy-MM-dd"));
				$("input[name='endDuration']").val(new Date(v.endDuration).format("yyyy-MM-dd"));
				$("input[name='declareTime']").val(new Date(v.declareTime).format("yyyy-MM-dd"));
				$("input[name='promise']").val(v.promise);
				$("input[name='declareFirecontrol']").val(v.declareFirecontrol);
				$("input[name='declareElectricity']").val(v.declareElectricity);
				$("input[name='declareFuelgas']").val(v.declareFuelgas);
				$("input[name='declareOther']").val(v.declareOther);
				$("#decorateScheme_articleId").val(v.decorateScheme_articleId);
				if(schemeFlag == "1"){
					//编辑状态下将input装该改为只读
					$("#decorateSchemeForm input").attr("readonly", "readonly");
					$("#decorateSchemeForm .Wdate").attr("disabled", true);
					//禁止点击上传按钮
					$("#decorateSchemeForm div[id^='filePicker_']").css("display","none");
				}else{
					//添加保存按钮 重置按钮
					$("#dSchemeBtn").prepend($("#dSchemeReset"));
					$("#dSchemeBtn").prepend($("#dSchemesave"));
					$("div.file-item span").show();
					$("#decorateSchemeForm div[id^='filePicker_']").css({"display":"inline-block","vertical-align":"bottom"});
				}
				//增加编辑按钮
				//$("#dSchemeBtn").prepend($("#dSchemeEdit"));
				}
			});
		}
	}

	//设置待删除附件的值到集合中
	function setSchemeRFL(id, _this) {
		layer.confirm('删除该图片？', {
			title : '警告',
			icon : 0,
			shade : [ 0.1, '#fff' ]
		}, function() {
			schemeFileList.push(id);
			//删除指定缩略图
			$("#" + id).remove();
			layer.close(layer.index);
		});
	}

	//显示图片删除按钮
	function imgBtnShow() {
		//显示图片删除按钮 
		$("div.file-item span").show();
		//禁止点击上传按钮
		$("#decorateSchemeForm div[id^='filePicker']").unbind("click").show();
	}

	//提交、保存表单
	function submitForm(obj) {
		var t = $(obj).html();
		if (opt != 2) { //如果是修改状态 就不涉及保存还是提交问题
			if (t == "保存") {
				opt = 0;
			} else if (t == "提交") {
				opt = 1;
			}
			//提交表单
			$("#decorateSchemeForm").submit();
		}else{//编辑
			var approvalCount = ${approvalCount};
			if(approvalCount == 0 ){
				//提交表单
				$("#decorateSchemeForm").submit();
			}else{
				layer.msg("此条数据已提交过审批，不能重复提交");
			}
		}
	}

	//开启编辑状态
	function editForm(obj) {
		layer.confirm('开启编辑状态？', {
			shade : [ 0.1, '#fff' ]
		}, function() {
			//删除编辑按钮
			$(obj).remove();
			//添加保存按钮 重置按钮
			$("#dSchemeBtn").prepend($("#dSchemeReset"));
			$("#dSchemeBtn").prepend($("#dSchemesave"));
			//开启编辑状态
			$("#decorateSchemeForm input").attr("readonly", false);
			$("#decorateSchemeForm .Wdate").attr("disabled", false);
			$("#decorateSchemeForm .Wdate").attr("readonly", true);
			//显示图片删除
			imgBtnShow();
			layer.close(layer.index);
		});
	}
	//本页面图片放大通用方法,同时隐藏上传按钮与图片删除按钮
	function imgPlus(data){
		$.each(data,function(i,v){
			hideFileBtn(v.id);
			PostbirdImgGlass.init({
		    	domSelector:"#"+v.id+" img",
		    	animation:true,
		    	//height:'80%',
		    	myDocument:window.parent.parent.parent
			});
		});
	}
	//隐藏附件删除按钮
	function hideFileBtn(id){
		$("#"+id+" span.uploadcancel").hide();
	}

	//收集表单数据准备提交
	function initDSchemeData() {
		var x = layer.load(2);
		var schemeName = $("input[name='schemeName']").val();
		var schemeImg = $("input[name='schemeImg']").val();
		var materials = $("input[name='materials']").val();
		var staDuration = $("input[name='staDuration']").val();
		var endDuration = $("input[name='endDuration']").val();
		var declareTime = $("input[name='declareTime']").val();
		var remark = $("#dsRemark").val();
		//如果日期为 "" gson解析时会出现异常
		if (staDuration == "") {
			staDuration = null;
		}
		if (endDuration == "") {
			endDuration = null;
		}
		if (declareTime == "") {
			declareTime = null;
		}
		if(opt == "2"){
			if(remark == "" || remark == undefined){
				layer.msg("变更说明不能为空");
				layer.close(x);
				return null;
			}
		}
		var dSchemeId = $("input[name='dSchemeId']").val(); //装修方案id
		var promise = $("input[name='promise']").val();
		var declareFirecontrol = $("input[name='declareFirecontrol']").val();
		var declareElectricity = $("input[name='declareElectricity']").val();
		var declareFuelgas = $("input[name='declareFuelgas']").val();
		var declareOther = $("input[name='declareOther']").val();
		var decorateScheme_articleId = $("#decorateScheme_articleId").val();
		//房间与客户 id 都在 roomDecorate页面的全局变量中
		return {
			id : dSchemeId, //如果为修改状态该id应该有值
			opt : opt,
			remark : remark,
			fkcustomerId : parent.fkcustomerId,
			fkroomId : parent.fkroomId,
			schemeName : schemeName,
			schemeImg : schemeImg,
			materials : materials,
			staDuration : staDuration,
			endDuration : endDuration,
			promise : promise,
			declareFirecontrol : declareFirecontrol,
			declareElectricity : declareElectricity,
			declareFuelgas : declareFuelgas,
			declareOther : declareOther,
			declareTime : declareTime,
			decorateScheme_articleId : "[" + decorateScheme_articleId + "]",
			fIds : schemeFileList
		};
	}

	function dSchemeDataSuccess(data, status) {
		//关闭加载层
		layer.close(layer.index);
		if (data.msg) {
			var i = layer.alert("操作成功", {
				offset : '20%',
				shade : 0
			}, function() {
				parent.parent.tabKey = 0;
				parent.parent.tabToken = 0;
				parent.location.reload();
				layer.close(i);
			});
		}
	}
	
</script>
</body>
</html>
